<template>
  <div>
    <!-- 目标: 用户选择栏目, 把用户选中的栏目信息在下面列表显示出来 -->
    <input type="checkbox" name="hobby" value="科幻"  v-model="hobby">科幻
    <input type="checkbox" name="hobby" value="喜剧"  v-model="hobby">喜剧
    <input type="checkbox" name="hobby" value="动漫n"  v-model="hobby">动漫
    <input type="checkbox" name="hobby" value="冒险"  v-model="hobby">冒险
    <input type="checkbox" name="hobby" value="科技"  v-model="hobby">科技
    <input type="checkbox" name="hobby" value="军事"  v-model="hobby">军事
    <input type="checkbox" name="hobby" value="娱乐"  v-model="hobby">娱乐
    <input type="checkbox" name="hobby" value="奇闻"  v-model="hobby">奇闻
    <ul>
      <li v-for="(item) in hobby" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobby:[],
    }
  },
  methods: {
    get(){
      console.log(this.hobby)
      this.hobby.push(this.hobby.value)
    }
  },

}
</script>

<style>

</style>